import React from 'react'
import ReactDOM from 'react-dom'

/**
 * jsx 中使用 js 表达式的注意事项
 * 
 * 1. 不能够在 jsx 中写对象，样式除外
 * 2. 在 jsx 中，注释应该这么写  {/\* 注释 *\/}
 * 3. 不能够在 jsx 中使用语句
 */

const info = '我在等风，也在等你'
const span = <span>我是span</span>
const handle = () => 1

const h4 = (
  <div>
    <h4 className="h4">{info}</h4>
    <p style={{ backgroundColor: 'red' }}>{1 + 1}</p>
    <p style={{ color: 'skyblue' }}>{2 * 4}</p>
    <p>{2 > 3 ? '大于' : '小于'}</p>
    <p>{span}</p>
    <p>{handle()}</p>
    {/* 这是 jsx 中的注释 */}
    {/* <p>{ { name: '亚瑟' } }</p> */}
    
    {/* 在 jsx 中使用的是表达式，而不能是语句 */}
    {/* <p>{ if (true) {} }</p> */}
  </div>
)

ReactDOM.render(h4, document.getElementById('root'))